import { init } from 'snabbdom/build/package/init'
import { h } from 'snabbdom/build/package/h'
import { attributesModule } from 'snabbdom/build/package/modules/attributes'
import { eventListenersModule } from 'snabbdom/build/package/modules/eventlisteners'
import { styleModule } from 'snabbdom/build/package/modules/style'

let patch = init([styleModule, attributesModule, eventListenersModule])

let indexKey = 3;
const movieList = [{
  index: 1,
  title: 'The Good, the Bad and the Ugly',
  description: 'A bounty hunting scam joins two men in an uneasy alliance against a third in a race to find a fortune in gold buried in a remote cemetery.',
}, {
  index: 2,
  title: '12 Angry Men',
  description: 'A dissenting juror in a murder trial slowly manages to convince the others that the case is not as obviously clear as it seemed in court.',
}, {
  index: 3,
  title: 'Fight Club',
  description: 'An insomniac office worker looking for a way to change his life crosses paths with a devil-may-care soap maker and they form an underground fight club that evolves into something much, much more...',
}]

let oldVnode = null

function view(data) {
  let arr = []
  data.forEach((item, index) => {
    // 不设置 key
    // arr.push(h('li', [h('input', { attrs: { type: 'checkbox' } }), h('span', item)]))
    // 设置key
    arr.push(h('li', { key: item.index, style: { display: 'flex', marginBottom: '10px' } }, [
      // h('input', { attrs: { type: 'checkbox' } }),
      h('span', { style: { color: '#fffede', marginLeft: '10px' }, }, item.index),
      h('span', { style: { color: '#fffede', marginLeft: '10px', width: '140px' }, }, item.title),
      h('span', { style: { color: '#fffede', marginLeft: '10px', width: '320px' }, }, item.description),
      h('span', {
        style: { color: '#b79581' },
        on: {
          click: function () {
            data.splice(index, 1)
            vnode = view(data)
            oldVnode = patch(oldVnode, vnode)
          }
        }
      }, 'x')
    ]))
  })

  let sort = h('div', [
    h('span', { style: { color: '#fffede' } }, 'Sort by:',),
    h('span', { style: { color: '#86969e', marginLeft: '10px' } }, 'Rank'),
    h('span', { style: { color: '#86969e', marginLeft: '10px' } }, 'Title'),
    h('span', { style: { color: '#86969e', marginLeft: '10px' } }, 'Description'),
    h('button', {
      style: { marginLeft: '250px' },
      on: {
        click: function () {
          data.push({
            index: ++indexKey,
            title: '12 Angry Men',
            description: 'A dissenting juror in a murder trial slowly manages to convince the others that the case is not as obviously clear as it seemed in court.',
          })
          vnode = view(data)
          oldVnode = patch(oldVnode, vnode)
        }
      }
    }, 'add'),
  ]);
  let title = h('h1', { style: { color: '#fffede' } }, 'Top 10 movies');


  let vnode = h('div',
    {
      style: {
        width: '100%',
        height: '100%',
        backgroundColor: '#1e1c19'
      }
    },
    h('div', {
      style: {
        width: '540px',
        margin: '0 auto'
      },
    }, [
      title,
      sort,
      h('ul', arr)
    ])
  );
  return vnode
}


let app = document.querySelector('#app')
// 首次渲染
oldVnode = patch(app, view(movieList))
